<!-- 秋检秋查（常规检查） -- 工单监控 -->
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="工单监控" @goBack="goBack">
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.count }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue"
          left-icon="" action-text="重置"
          right-icon="search" placeholder="搜索"
          @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <view class="task-list-container"  v-if="taskList.length > 0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model="isLoading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadMore"
          >
          <!-- 列表循环   -->
          <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
            <view class="task-title">
              <view class="task-title-main">
                <img src="../../../static/img/light.png" alt="">
                <text class="task-title-main-text">{{ item.name }}</text>
              </view>
              <text class="task-status" :class="color(item.taskState)">
                <text>{{item.taskStateName}}</text>
              </text>
            </view>
            <hr class="task-hr">
            <view class="top-task-main">
              <text class="task-big-ltitle">巡视站点:</text>
              <text class="task-small-ltitle">{{ item.taskSiteName }}</text>
            </view>
            
            <view class="top-task-main">
              <text class="task-big-ltitle">计划开始时间:</text>
              <text class="task-small-ltitle">{{ item.tmsStartTimS }}～{{item.tmsEndTimS}}</text>
            </view>
            <view class="top-task-main" v-if="item.taskState !== 2">
              <text class="task-big-ltitle">巡视人：</text>
              <text class="task-small-ltitle" v-if="item.taskState !== 2">{{ item.operName }}</text>
            </view>
            <view class="top-task-main" v-if="item.taskState !== 2">
              <text class="task-big-ltitle">实际完成时间:</text>
              <text class="task-small-ltitle">{{item.tourEndTim}}</text>
            </view>
          </view>
          </van-list>
        </van-pull-refresh>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup
      :type-list="typeList"
      :otherList="otherList"
      :showScreen="showScreen"
      @closePopup="showScreen=false"
      @reset="resetCondition"
      @confirm="confirmCondition">
    </screenPopup>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../common/screenPopup";
// import screenPopup from "../../operationApprove/common/screenPopup2";
import plateTitle from '../../../components/business/plateTitle.vue';
import { Dialog } from "vant";

import { mapGetters } from "vuex";
import moment from "moment";

let taskStatistics = [
  { // 全部
    apiKeys: 'QB',
    count: 0,
    title: '全部',
    isSelected: false,
  },
  { // 未完成
    apiKeys: 'WWC',
    count: 0,
    title: '未完成',
    isSelected: false,
  },
  { // 已完成
    apiKeys: 'YWC',
    count: 0,
    title: '已完成',
    isSelected: false,
  }
]

let taskStateMap = { QB: null, WWC: 2, YWC: 99 }

export default {
  name: "taskMonitor",
  components: {navBar, screenPopup, searchEquMatch, plateTitle},
  data() {
    return {
      searchValue: "",
      showScreen: false,
      showSearch: false,
      taskList: [],
      color: (TASK_STATE) => {
        if (TASK_STATE === 1) return "blue";
        if (TASK_STATE === 2) return "red";
        if (TASK_STATE === 3) return "yellow";
        if (TASK_STATE === 99) return "green";
      },
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
      current:0,
      planTim: null,
      // typeList: [
      //   {
      //     title:'计划开始时间',
      //     type:'planTim',
      //     optionList: [
      //       { TITLE: '今年', VALUE: 1, isActive: true },
      //       { TITLE: '去年', VALUE: 2, isActive: false },
      //       { TITLE: '本月', VALUE: 3, isActive: false },
      //       { TITLE: '上月', VALUE: 4, isActive: false },
      //     ],
      //   }
      // ],
      typeList:  [
        { TITLE: '今年', VALUE: 1, isActive: true },
        { TITLE: '去年', VALUE: 2, isActive: false },
        { TITLE: '本月', VALUE: 3, isActive: false },
        { TITLE: '上月', VALUE: 4, isActive: false },
      ],
      otherList:[
        {
          TITLE:'其他',
        },
        // {
        //   TITLE:'按月',
        // }
      ],
      menuList: taskStatistics,
      taskType:'',// 右侧筛选工单类型
      user:'MANAGE',
      taskStae: null, // 工单状态 2-未完成  99-已完成  null-全部

      otherTim: '',
      otherTimArr: []
    };
  },
  onLoad(options) {
    // 首页跳转至此页，携带默认tab信息
    if(options.taskStatistics) {
      let option = JSON.parse(options.taskStatistics);
      for(let i in option) {
        option[i].isSelected && (this.current = +i) && (this.taskStae = taskStateMap[option[i].apiKeys]);
      }
    }
 
    this.getTaskListByAdminT();
  },
  computed:{
    ...mapGetters(['userData']),
  },
  methods: {
  
    chooseMenu(item, index) {
      this.current = index
      this.taskStae = taskStateMap[item.apiKeys]
      this.total = item.count
      this.onRefresh()
    },
    // 获取列表
    getTaskListByAdminT() {
      const params = {
        pageSize: this.limit,
        pageCurr: this.page,
        userId: this.userData.userId,
        taskState: this.taskStae,
        name: this.searchValue,
       
        planTim: this.planTim,
        otherStartTim: this.otherTimArr[0],
        otherEndTim: this.otherTimArr[0],
      }
      console.log('params', params)
      
      this.$apiRequest.qjqcApi.getAutumnInspectionTaskListInfo(params)
        .then(res => {
          console.log('list', res.data)
        
          this.taskList = this.taskList.concat(res.data.list.map(item => {
            return{
              tmsStartTimS:item.tmsStartTim ? moment(item.tmsStartTim).format('YYYY-MM-DD HH:mm') : '',
              tmsEndTimS: item.tmsEndTim ? moment(item.tmsEndTim).format('YYYY-MM-DD HH:mm') : '',
              ...item
            }
          }));
          // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有

          // 上侧统计部分
          if (res.data.num) {
            this.menuList[0].count = res.data.num.allCount   // 全部
            this.menuList[1].count = res.data.num.noFinshNum   // 未完成
            this.menuList[2].count = res.data.num.finshNum  // 已完成
          }
          this.isLoading = false;
          this.refreshing = false;
          this.total = this.menuList[this.current].count

          
        
        })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskListByAdminT();
    },
    loadMore() {
      console.log('555555', this.total, this.taskList.length)
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getTaskListByAdminT();
      } else {
        this.finished = true;
      }
    },
    resetCondition(){
      this.otherTimArr = [];
      this.otherTim = '';
    },
    confirmCondition(selected,beginTime,endTime) {
      // console.log('筛选数据', selected,beginTime,endTime)
      this.planTim = selected
      this.otherTimArr = [beginTime,endTime]
      this.onRefresh()
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/autumnInspection/index'
      })
    },
    screen() {
      this.showScreen = true;
    },
    jump(item) {
      let timeDate = item.tmsStartTimS +'-'+item.tmsEndTimS
      if (item.taskState === 2) {
        Dialog.alert({
          message: '该工单未完成，不支持查看详情',
          theme: 'round-button',
        });
        return;
      } else {
        uni.navigateTo({
          url: `/pages/autumnInspection/taskMonitor/detail?objId=${item.objId}&inletType=2`
        })
      }
      
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;

  .header {
    position: sticky;
    top: 0;
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(130);
    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      //margin-left: px2vw(30);
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      li {
        //width: calc(1 * (100% - #{px2vw(400)}) / 4);
        height: 100%;
        //margin-left: px2vw(80);
        //float: left;
        position: relative;
        .right-box {
          height: px2vh(112);
          //margin-left:px2vw(10);
          float: left;
          margin-top: px2vh(59);
          text-align: center;
          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }
          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }
          .selectmenu {
            color: #417ADC;
          }
        }
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          //right: px2vw(40);
          left: 50%;
          transform: translateX(-50%);
          background-image: url('../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }

  .main-container {
    height: calc(100vh - #{px2vh(413)});
    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(443)} - 38px);
      overflow: auto;

      .task-list {
        width: px2vw(1020);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        padding-bottom: px2vh(30);
        margin: 0 px2vw(30) px2vh(30) px2vw(30);

        .task-title {
          width: px2vw(940);
          height: px2vh(80);
          margin-left: px2vw(40);
          padding-top: px2vw(30);
          margin-bottom: px2vh(30);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .task-title-main {
            display: flex;
            align-items: center;
            img {
              width: px2vw(64);
              height: px2vw(64);
            }
          }

          .task-title-main-text {
            width: px2vw(700);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: px2vw(20);
            font-size: px2vh(48);
          }

          .task-status {
            width: px2vw(123);
            height: px2vh(50);
            line-height: px2vh(50);
            border-radius: px2vw(10);
            font-size: px2vw(32);
            text-align: center;
          }

          .task-status.blue {
            color: #417ADC;
            background: #E4ECFA;
          }

          .task-status.red {
            color: #FF7070;
            background: rgba(255, 112, 112, 0.1);
          }

          .task-status.yellow {
            color: #FFAD0E;
            background: rgba(255, 180, 0, 0.1);
          }

          .task-status.green {
            color: #3CDA68;
            background: rgba(62, 218, 104, 0.1);
          }
        }

        .task-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
          margin-bottom: px2vh(42);
        }

        .top-task-main {
          width: px2vw(900);
          font-size: px2vh(36);
          line-height: px2vh(62);
          margin-left: px2vw(60);

          .task-big-ltitle, .task-big-rtitle {
            color: #666;
          }

          .task-small-ltitle, .task-small-rtitle {
            margin-left: px2vw(25);
            color: #333;
          }

          .task-big-rtitle {
            margin-left: px2vw(245);
          }
        }
      }
    }
  }
}
.other-box {
  background: rgba(240, 242, 245, 1);
  border-radius: px2vh(20);
}
</style>
